<template>
  <div class="div0" style="background-color: #ffffff;">
    <div class="div1">
      <el-row>
        <el-col :span="12">
          <p class="p1">海港时空地理信息系统</p>
<!--          <el-button class="bt1" @click="dow(1)">开&nbsp;发&nbsp;包 下&nbsp;载</el-button>-->
          <el-button class="bt1"><a href="#download" style="color: #FFFFFF;text-decoration: none;">开&nbsp;发&nbsp;包 下&nbsp;载</a></el-button>
        </el-col>
        <el-col :span="12">
          <img class="img" src="./1.png">
        </el-col>
      </el-row>
    </div>
    <div class="div2">
      <el-row>
        <el-col :span="8">
          <div>
            <img class="img1" src="./2.png">
            <p class="p2">
              基于海港区城市发展定位，依托云计算、物联网、倾斜摄影等新技术，统一管理、维护、共享保定时空信息基础设施。
            </p>
          </div>

        </el-col>
        <el-col :span="8">
          <img class="img1" src="./3.png">
          <p class="p2">提供多种网页采集策略与配套资源，帮助整个采集过程实现数据的完整性与稳定性</p>
        </el-col>
        <el-col :span="8">
          <img class="img1" src="./4.png">
          <p class="p2">眼见即可采，不管是数据处理，还是分析计算，支持所有部门渠道的信息，满足各种处理需求</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <img class="img1" src="./5.png">
          <p class="p2">内置数百个网站数据源，全面覆盖多个行业，只需简单设置，就可快速准确获取数据</p>
        </el-col>
        <el-col :span="8">
          <img class="img1" src="./6.png">
          <p class="p2">随着地理信息在各领域的不断渗透，在位置服务方面，人们对于实时、动态的位置服务需求越来越多，以便于查询周围的相关资讯。</p>
        </el-col>
        <el-col :span="8">
          <img class="img1" src="./7.png">
          <p class="p2">分布式云集群服务器和多用户协作管理平台的支撑，可灵活调度任务，顺利处理海量数据</p>
        </el-col>
      </el-row>
    </div>
    <div class="div3" id="download">
      <span style="font-size: 18px;font-weight:bold">历史版本</span>
      <hr style="border: 2px solid #1E74FF;">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="版本"
            width="">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            width="">
        </el-table-column>
        <el-table-column
            label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="dow(scope.row.index)">下载</el-button>
          </template>
        </el-table-column>  
      </el-table>
    </div>
  </div>
</template>

<script>
  import $axios from "@/network";
import { type } from "os";
export default {
  name: "DownloadList",
  data() {
    return {
      tableData: [
        {index:1,name: 'WebGL 开发包', date: '2023-07-24'},
        {index:2,name: '移动端开发包', date: '2023-08-20'},
        {index:3,name: '云端服务 Windows安装包', date: '2023-07-23'},
        {index:4,name: 'PostGIS Windows安装包', date: '2023-07-22'},
        {index:5,name: 'Windows版本QGIS安装包', date: '2023-07-21'}
      ],
      fileName: "",
    }
  },
  methods: {
    dow(k) {
      $axios({
        method: "get",
        url: "/ffdpd/findFileName/"+k
      }).then((r) => {
        let fileName = r.data
        console.log(fileName);
        $axios({
          method: "get",
          url: "/download/downloadPackage/"+k
          ,responseType: "blob"
        }).then((res) => {
          let b = new Blob([res],{type: 'application/octet-stream'});
          let url = window.URL.createObjectURL(b);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          window.URL.revokeObjectURL(url);
        });
      });
      
    }
  },
}
</script>

<style lang="scss" scoped>
.div0 {
  text-align: center;
  .div1 {
    background: -webkit-linear-gradient(left, #1F6AD2FF, #123175FF);
    height: 521px;
    width: 100vw;
  }
}

.div2 {
  width: 60%;
  text-align: center;
  padding-top: 100px;
  margin-left: 20%;
}
.div3 {
  width: 50%;
  text-align: left;
  font-size: 15px;
  margin-top: 80px;
  margin-left: 25%;
  a {
    color: black;
    text-decoration:none;
  }
}

.p1 {
  font-size: 36px;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-top: 150px;
}
.p2 {
  width: 250px;
  font-size: 18px;
  margin-left: 50px;
}
.img {
  width: 400px;
  margin-top: 50px ;
  margin-left: 100px;
}
.img1 {
  width: 84px;
  height: 72px;
}
.bt1 {
  width: 200px;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: -webkit-linear-gradient(left, #45DB9DFF, #1EAB7DFF);
  text-align: center;
  padding-top:  10px;
  margin-top: 50px;
}
</style>